/**
* Copyright (c) 2018-present, Chen Guodong
* All rights reserved.
*
* @flow
*/
<template>
  <div class="modal-box">
    <p class="title">
      <b class="left">征收资金情况</b>
    </p>
    <div class="main">
      <div class="chart">
        <v-chart ref="chart" auto-resize :options="options" style="width: 100%; height: 100%;" theme="macarons" />
      </div>
      <div class="chart">
        <v-chart ref="chart" auto-resize :options="options2" style="width: 100%; height: 100%;" theme="macarons" />
      </div>
    </div>
  </div>
</template>
<script>
import ECharts from "vue-echarts";

const getChartOptions = data => {
  if (!data) return {};
  let chartOptions = {
    tooltip: {
      trigger: "item",
      formatter: "{b} : {c}万元 ({d}%)",
      position: function(pos, params, dom, rect, size) {
        // 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。
        var obj = { top: 60 };
        obj[["left", "right"][+(pos[0] < size.viewSize[0] / 2)]] = 5;
        return obj;
      }
    },
    legend: {
      //图例组件
      orient: "vertical", //布局  纵向布局 图例标记居文字的左边 vertical则反之
      left: "60%",
      top: "middle",
      itemWidth: 10, //图例标记的图形宽度
      itemHeight: 10, //图例标记的图形高度
      data: ["已拨付", "缺口"],
      icon: "circle",
      textStyle: {
        color: "#616161", //文字颜色
        fontSize: 10 //文字大小
      },
      formatter: function(name) {
        if (name === "已拨付") {
          return name + "\n" + Math.round(data.geted / 10000);
        } else {
          return name + "\n" + Math.round(data.gap / 10000);
        }
      }
    },
    series: [{
      name: "征收资金情况",
      type: "pie",
      radius: ["55%", "70%"],
      center: ["30%", "50%"],
      avoidLabelOverlap: false,
      hoverAnimation: false,
      label: {
        show: false
      },
      data: [
        { value: Math.round(data.geted / 10000), name: "已拨付" },
        { value: Math.round(data.gap / 10000), name: "缺口" },
        {
          value: 0,
          name: "总量",
          label: {
            show: true,
            position: "center",
            formatter: function() {
              return "资金总额\n" + Math.round(data.total / 10000);
            },
            fontSize: 12
          }
        }
      ]
    }]
  };
  return chartOptions;
};

const getChartOptions2 = data => {
  if (!data) return {};
  let chartOptions = {
    tooltip: {
      trigger: "item",
      formatter: "{b} : {c} ({d}%)",
      position: function(pos, params, dom, rect, size) {
        // 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。
        var obj = { top: 60 };
        obj[["left", "right"][+(pos[0] < size.viewSize[0] / 2)]] = 5;
        return obj;
      }
    },
    legend: {
      //图例组件
      orient: "vertical", //布局  纵向布局 图例标记居文字的左边 vertical则反之
      left: "60%",
      top: "middle",
      itemWidth: 10, //图例标记的图形宽度
      itemHeight: 10, //图例标记的图形高度
      icon: "circle",
      data: ["已支付", "余额", "未付"],
      textStyle: {
        color: "#616161", //文字颜色
        fontSize: 10 //文字大小
      },
      formatter: function(name) {
        if (name === "已支付") {
          return name + "\n" + Math.round(data.payed / 10000);
        } else if (name === "余额") {
          return name + "\n" + Math.round(data.balance / 10000);
        } else {
          return name + "\n" + Math.round(data.unpayed / 10000);
        }
      }
    },
    series: [{
      name: "征收资金情况",
      type: "pie",
      radius: ["55%", "70%"],
      center: ["30%", "50%"],
      avoidLabelOverlap: false,
      hoverAnimation: false,
      label: {
        show: false
      },
      data: [
        { value: Math.round(data.payed / 10000), name: "已支付" },
        { value: Math.round(data.balance / 10000), name: "余额" },
        { value: Math.round(data.unpayed / 10000), name: "未付" },
        {
          value: 0,
          name: "总量",
          label: {
            show: true,
            position: "center",
            formatter: function() {
              return "资金支付\n情况";
            },
            fontSize: 12
          }
        }
      ]
    }]
  };
  return chartOptions;
};

export default {
  props: {
    money: Object
  },
  data() {
    return {
      options: getChartOptions(this.money),
      options2: getChartOptions2(this.money)
    };
  },
  watch: {
    money: function(data) {
      this.options = getChartOptions(data);
      this.options2 = getChartOptions2(this.money);
    }
  },
  methods: {},
  mounted() {
    const self = this;

    let chartObj = self.$refs.chart;
    self.currentIndex = -1;
  },
  components: { "v-chart": ECharts }
};

</script>
<style lang='less' scoped>
.main {
  height: 120px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  
  .chart {
    flex: 1;
    display: flex;
    justify-content: center;
    align-content: center;
    height: 100%;
    overflow: hidden;
  }
}

</style>
